<script setup>
import {
  getArtCateListApi,
  addArtCateApi,
  updateArtCateApi,
  delArtCateApi,
} from "@/api/article";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";

// 查询分类
const cateList = ref([]);
const getArtCateList = async () => {
  const { data: res } = await getArtCateListApi();
  cateList.value = res.data;
};
getArtCateList();

//新增文章分类
const addVisible = ref(false);
const addForm = ref({
  name: "",
  alias: "",
});
const addRules = {
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    {
      pattern: /^\S{1,10}$/,
      message: "分类名必须是1-10位的非空字符",
      trigger: "blur",
    },
  ],
  alias: [
    { required: true, message: "请输入分类别名", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9]{1,15}$/,
      message: "分类别名必须是1-15位的字母数字",
      trigger: "blur",
    },
  ],
};
const addRef = ref(null);

const handleAddClose = () => {
  addRef.value.resetFields();
};

const addArtCate = () => {
  addRef.value.validate(async (valid) => {
    if (!valid) return;

    // ajax请求
    const { data: res } = await addArtCateApi(addForm.value);
    // 失败提示
    if (res.code !== 0) return ElMessage.error(res.message);
    // 成功提示
    ElMessage.success(res.message);
    // 关闭弹出框
    addVisible.value = false;
    // 重新获取文章分类数据
    getArtCateList();
  });
};

//编辑文章分类
const editVisible = ref(false);
const editForm = ref({});
const editRef = ref(null);

const edit = (row) => {
  // 1.编辑弹出框显示
  editVisible.value = true;
  // 2.数据回显
  // 两种处理方式：
  // 方式1:直接获取当前行的数据
  editForm.value = row;
  // 方式2:根据id值发送ajax请求获取当前行数据
  // const res = getArtCateById(row.id)
  // editForm.value = res
};
const handleEditClose = () => {
  editRef.value.resetFields();
};
const updateArtCate = () => {
  editRef.value.validate(async (valid) => {
    if (!valid) return;

    // ajax更新文章分类
    const { data: res } = await updateArtCateApi(editForm.value);
    // console.log(res);
    // 失败
    if (res.code !== 0) return ElMessage.error(res.message);
    // 成功
    ElMessage.success(res.message);

    // 关闭更新弹出框
    editVisible.value = false;
    // 重新获取最新分类列表数据
    getArtCateList();
  });
};

// 删除文章分类
const del = async (id) => {
  const confirmRes = await ElMessageBox.confirm(
    "确定要删除该文章分类吗?",
    "删除文章分类"
  ).catch((error) => error);

  if (confirmRes === "cancel") return;

  const { data: res } = await delArtCateApi({ id });
  // 失败
  if (res.code !== 0) return ElMessage.error(res.message);
  // 成功
  ElMessage.success(res.message);
  // 重新获取最新分类列表数据
  getArtCateList();
};
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header header-box">
        <span>文章分类</span>
        <el-button type="primary" @click="addVisible = true"
          >新增文章分类</el-button
        >
      </div>
    </template>
    <!-- 表格 -->
    <el-table :data="cateList" style="width: 100%" stripe border>
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="alias" label="别名" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="success" @click="edit(row)">编辑</el-button>
          <el-button type="danger" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新增文章分类弹出框 -->
  <el-dialog
    v-model="addVisible"
    title="新增文章分类"
    width="40%"
    @close="handleAddClose"
  >
    <!-- 表单 -->
    <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="70px">
      <el-form-item label="分类名称" prop="name">
        <el-input
          v-model="addForm.name"
          minlength="1"
          maxlength="10"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类别名" prop="alias">
        <el-input
          v-model="addForm.alias"
          minlength="1"
          maxlength="15"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addArtCate">确定</el-button>
        <el-button type="primary" @click="addVisible = false"> 关闭 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑文章分类弹出框 -->
  <el-dialog
    v-model="editVisible"
    title="编辑文章分类"
    width="40%"
    @close="handleEditClose"
  >
    <el-form
      :model="editForm"
      :rules="addRules"
      ref="editRef"
      label-width="70px"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input
          v-model="editForm.name"
          minlength="1"
          maxlength="10"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类别名" prop="alias">
        <el-input
          v-model="editForm.alias"
          minlength="1"
          maxlength="15"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateArtCate">确定</el-button>
        <el-button type="primary" @click="editVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.header-box {
  display: flex;
  justify-content: space-between;
}
</style>
